<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ebuy Online Gadget Store - Home</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
	function clearModalFields() {
		$("#productName").val("");
		$("#description").val("");
		$("#stocks").val("");
		$("#price").val("");
	}

	function addProduct() {
		var productName = $("#productName").val();
		var description = $("#description").val();
		var stocks = $("#stocks").val();
		var price = $("#price").val();
		var type = $("#type :selected").attr("value");

		$.post("AddProduct", {
			request : "add-product",
			productName : productName,
			description : description,
			stocks : stocks,
			price : price,
			type : type
		}, function(data) {
			$("#products").append(
					buildProductRow(data.id, data.productName, data.type,
							data.description, data.price, data.stocks));
			
		});
		
		$('#addProduct-modal').modal('hide');
	}

	function buildProductRow(id, name, type, description, price, stocks) {
		return '<div class="row" style="margin-top: 20px;">'
				+ '<div class="span8">' + '<h3>'
				+ name
				+ '</h3>'
				+ '<h5>'
				+ type
				+ '</h5>'
				+ '<p>'
				+ description
				+ '</p>'
				+ '	</div>'
				+ '<div class="span2" style="text-align: right;">'
				+ '<h3>Php '
				+ price
				+ '</h3>'
				+ '<h5>Stocks Left: '
				+ stocks
				+ '</h5>'
				+ '</div>'
				+ '<div class="span2" style="text-align: right;">'
				+ '	<button class="btn btn-primary">Edit</button>'
				+ '	<button class="btn btn-danger" onclick="deleteProduct('+id+')">Delete</button>'
				+ '</div>'
				+ '</div>'
				+ '<div style="width: 100%; height: 0; border-top: 1px dashed #DDDDDD; font-size: 0;">-</div>';
	}
	
	function deleteProduct(id){
		alert(id);
	}
</script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
	<div class="container">
		<div class="navbar">
			<div class="navbar-inner">
				<div class="container">
					<ul class="nav">
						<li><a class="brand" href="#">Ebuy</a></li>
						<li class="active"><a href="#">Products</a></li>
						<li><a href="#">Purchase Orders</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="span6">
				<h1>Products</h1>
				<c:if test="${not empty customer }">
					<h4>Hi ${customer.name }! Check out our fine selection of
						top-of-the-line electronic gadgets!</h4>
				</c:if>
				<c:if test="${empty customer }">
					<h4>Administration</h4>
				</c:if>
			</div>
			<div class="span6">
				<c:if test="${empty customer}">
					<a class="btn btn-large pull-right" data-toggle="modal"
						href="#addProduct-modal" onclick="clearModalFields()">Add
						Product</a>
				</c:if>
			</div>
		</div>
		<div id="products" style="margin: 0px; padding: 0px;">
			<c:forEach var="product" items="${products }">
				<div class="row" style="margin-top: 20px;">
					<div class="span8">
						<h3>${product.name }</h3>
						<h5>${product.type.name }</h5>
						<p>${product.description }</p>
					</div>
					<div class="span2" style="text-align: right;">
						<h3>Php ${product.price }</h3>
						<h5>Stocks Left: ${product.stocks }</h5>
					</div>
					<c:if test="${empty customer }">
						<div class="span2" style="text-align: right;">
							<button class="btn btn-primary">Edit</button>
							<button class="btn btn-danger"
								onclick="deleteProduct(${product.id})">Delete</button>
						</div>
					</c:if>
					<c:if test="${not empty customer }">
						<div class="span2" style="text-align: right;">
							<button class="btn btn-primary btn-large">Buy!</button>
						</div>
					</c:if>
				</div>
				<div
					style="width: 100%; height: 0; border-top: 1px dashed #DDDDDD; font-size: 0;">-</div>
			</c:forEach>
		</div>
	</div>

	<div class="modal hide" id="addProduct-modal">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">x</button>
			<h3>Add Product</h3>
		</div>
		<div class="modal-body">
			<form class="form-horizontal">
				<fieldset>
					<div class="control-group">
						<label class="control-label" for="productName">Product
							Name</label>
						<div class="controls">
							<input type="text" class="input-xlarge" id="productName">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="type">Product Type</label>
						<div class="controls">
							<select id="type">
								<c:forEach var="types" items="${productType }">
									<option value="${types.id }">${types.name }</option>
								</c:forEach>
							</select>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="description">Description</label>
						<div class="controls">
							<textarea class="input-xlarge" id="description" rows="3"></textarea>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="price">Price</label>
						<div class="controls">
							<input type="text" class="input-medium" id="price">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="stocks">Stocks</label>
						<div class="controls">
							<input type="text" class="input-medium" id="stocks">
						</div>
					</div>
				</fieldset>
			</form>
		</div>
		<div class="modal-footer">
			<button class="btn btn-primary" onclick="addProduct()">Add Product</button>
		</div>
	</div>
</body>
</html>